<template>
  <div class="ContractInformation">
    <van-nav-bar
      left-arrow
      class="title-bar"
      title="签约信息"
      :border="false"
      @click-left="backDelete"
    />
    <van-field
      class="field-name"
      center
      v-model="user.name"
      label="任务名称"
      placeholder="必填"
    />
    <van-cell
      class="appearance"
      center
      title="业务类型"
      :value="
        businessType.length === 0 ? '未分类' : businessType.businessTypeName
      "
      is-link
      @click="showBusinessTypes = true"
    />
    <van-cell
      class="appearance"
      center
      title="签约截止时间"
      :value="contractAllInfo.contractBaseInfo.signingEndTime"
      is-link
      @click="showDate = true"
    />
    <van-cell
      class="appearance"
      center
      title="文件到期日期"
      :value="contractAllInfo.contractBaseInfo.terminatedTime"
      is-link
      @click="showExpireDate = true"
    />
    <van-cell class="appearance on-off" center title="顺序签署">
      <!-- 使用 title 插槽来自定义标题 -->
      <template #default>
        <van-switch v-model="OrderSetdialogVisible" size="1.5em" />
      </template>
    </van-cell>
    <!-- 参与方 -->
    <div class="participant"><span>参与方</span></div>
    <div class="enterprise">
      <div class="enterprise-one">
        <van-button
          icon="add-o"
          type="default"
          block
          @click="$router.push('/enterprises-signed')"
        >
          签约企业
        </van-button>
        <i class="low-i"></i>
        <van-button
          icon="add-o"
          type="default"
          block
          @click="$router.push('/send-a-duplicate')"
          >签约个人
        </van-button>
      </div>
      <div class="box">
        <div
          v-for="(item, index) in contractAllInfo.signatoryInfoList"
          :key="index"
        >
          <div class="box-company" v-if="item.signerType === '1'">
            <div class="box-company-title">{{ item.orgName }}</div>
            <span class="box-company-content">{{ item.userName }}</span
            ><span class="box-company-num">{{ item.userMobile }}</span>
            <van-icon name="cross" @click="deleteSignar(index)" />
          </div>
          <div class="box-personage" v-else>
            <div class="box-company-title">
              {{ item.userName }}<span>{{ item.userMobile }}</span>
            </div>
            <van-icon name="cross" @click="deleteSignar(index)" />
          </div>
        </div>
      </div>
    </div>
    <!-- 抄送方 -->
    <div class="participant"><span>抄送方</span></div>
    <div class="enterprise">
      <div class="enterprise-one">
        <van-button
          icon="add-o"
          type="default"
          block
          @click="$router.push('/add-enterprise')"
        >
          抄送企业
        </van-button>
        <i class="low-i"></i>
        <van-button
          icon="add-o"
          type="default"
          block
          @click="$router.push('/add-personal')"
          >抄送个人
        </van-button>
      </div>
      <div class="box">
        <div
          v-for="(item, index) in contractAllInfo.recipientInfoList"
          :key="index"
        >
          <div class="box-company" v-if="item.recipientType === '1'">
            <div class="box-company-title">{{ item.orgName }}</div>
            <span class="box-company-content">{{ item.operatorName }}</span
            ><span class="box-company-num">{{ item.operatorContact }}</span>
            <van-icon name="cross" @click="deleteRecipien(index)" />
          </div>
          <div class="box-personage" v-else-if="item.recipientType === '2'">
            <div class="box-company-title">
              {{ item.operatorName }}<span>{{ item.operatorContact }}</span>
            </div>
            <van-icon name="cross" @click="deleteRecipien(index)" />
          </div>
        </div>
      </div>
    </div>
    <div class="participant"><span>合同文件</span></div>
    <!-- 合同文件 -->
    <div class="file">
      <van-uploader :after-read="uploadSuccess" accept=".pdf">
        <van-icon name="plus" />
      </van-uploader>
      <div
        class="text-img"
        v-for="(item, index) in contractAllInfo.signingFileInfoList"
        :key="index"
      >
        <div class="text-box">
          <img src="@/assets/文件图.png" alt="" />
        </div>
        <div class="text-span">{{ item.fileName }}</div>
      </div>
    </div>
    <div class="participant"><span>附属文件</span></div>
    <!-- 附属文件 -->
    <div class="file">
      <van-uploader :after-read="uploadAttachFile" accept=".pdf">
        <van-icon name="plus" />
      </van-uploader>
      <div
        class="text-img"
        v-for="(item, index) in contractAllInfo.attachFileInfoList"
        :key="index"
      >
        <div class="text-box">
          <img src="@/assets/文件图.png" alt="" />
        </div>
        <div class="text-span">{{ item.fileName }}</div>
      </div>
    </div>
    <div class="add-text-end">
      <van-button type="info" block @click="checkParams">下一步</van-button>
    </div>
    <!-- 业务类型 -->
    <van-popup
      v-model="showBusinessTypes"
      position="bottom"
      :style="{ height: '30%' }"
      :close-on-click-overlay="false"
    >
      <div
        class="below-show-name"
        v-for="(item, index) in businessTypes"
        :key="index"
        @click="selectOrganization(item)"
      >
        {{ item.businessTypeName }}
      </div>
      <van-button
        class="btn-fixed"
        type="default"
        block
        @click="showBusinessTypes = false"
        >取消</van-button
      >
    </van-popup>
    <!-- 截止日期 -->
    <van-calendar v-model="showDate" @confirm="signOnConfirm" />
    <!-- 到期日期 -->
    <van-calendar v-model="showExpireDate" @confirm="expireOnConfirm" />
  </div>
</template>

<script>
import { businessTyle, fileUpload, addDraft } from '@/api/user'
import { mapState } from 'vuex'
export default {
  data() {
    return {
      user: {
        name: ''
      },
      // 业务类型
      businessTypes: [],
      showBusinessTypes: false,
      // 日期
      showDate: false,
      // 到期时间
      showExpireDate: false,
      // 顺序
      OrderSetdialogVisible: true,
      // 提交合同信息
      contractAllInfo: {
        contractBaseInfo: {
          contractId: '',
          title: '',
          sortFlag: '1',
          signingEndTime: '',
          terminatedTime: '',
          businessType: ''
        },
        signatoryInfoList: [], // 参与方
        signingFileInfoList: [], // 签署文件
        attachFileInfoList: [], // 附属文件
        signingFileCoordInfoList: [],
        recipientInfoList: [] // 抄送人
      },
      signFileCount: 0, // 签署文件数量
      attachFileCount: 0 // 附件数量
    }
  },
  created() {
    this.getBusTypes()
    this.user.name = this.controlName
    this.contractAllInfo.signatoryInfoList = this.recipien
    this.contractAllInfo.recipientInfoList = this.addresser
    this.contractAllInfo.contractBaseInfo.signingEndTime = this.signDate
    this.contractAllInfo.contractBaseInfo.terminatedTime = this.expireDate
    this.contractAllInfo.signingFileInfoList = this.fileList
    this.contractAllInfo.attachFileInfoList = this.affiliate
  },
  mounted() {},
  methods: {
    // 签署文件
    async uploadSuccess(file) {
      this.$toast.loading({
        message: '上传中',
        forbidClick: true
      })
      const formDate = new FormData()
      formDate.append('file', file.file)
      try {
        const { data: res } = await fileUpload(formDate)
        if (res.code !== '0') {
          return this.$toast.fail('上传失败，请重试!')
        }
        this.$toast.success('上传成功')
        const fileList = {
          fileType: '1',
          fileName: res.data.fileName,
          filePath: res.data.filePath,
          filePages: res.data.filePages
        }
        this.$store.commit('setFileList', fileList)
      } catch (error) {
        console.log(error)
      }
    },
    // 附属文件
    async uploadAttachFile(file) {
      this.$toast.loading({
        message: '上传中',
        forbidClick: true
      })
      const formDate = new FormData()
      formDate.append('file', file.file)
      try {
        const { data: res } = await fileUpload(formDate)
        if (res.code !== '0') {
          return this.$toast.fail('上传失败，请重试!')
        }
        this.$toast.success('上传成功')
        this.$store.commit('setAffiliate', res.data)
      } catch (error) {
        console.log(error)
      }
    },
    async getBusTypes() {
      try {
        const { data: res } = await businessTyle()
        if (res.code !== '0') {
          return this.$toast.fail('数据获取失败')
        }
        this.businessTypes = res.data
      } catch (error) {
        console.log(error)
      }
    },
    // 业务类型
    selectOrganization(item) {
      this.$store.commit('setBusinessType', item)
      this.contractAllInfo.contractBaseInfo.businessType = item
      this.showBusinessTypes = false
    },
    formatDate(date) {
      return `${date.getFullYear()}-${date.getMonth() + 1}-${date.getDate()}`
    },
    // 签约截至时间
    signOnConfirm(date) {
      this.showDate = false
      this.$store.commit('setSignDate', this.formatDate(date))
      this.contractAllInfo.contractBaseInfo.signingEndTime = this.formatDate(
        date
      )
    },
    // 到期时间
    expireOnConfirm(date) {
      this.showExpireDate = false
      this.$store.commit('setExpireDate', this.formatDate(date))
      this.contractAllInfo.contractBaseInfo.terminatedTime = this.formatDate(
        date
      )
    },
    deleteSignar(index) {
      this.contractAllInfo.signatoryInfoList.splice(index, 1)
      this.$store.commit('deleteSignar', index)
    },
    deleteRecipien(index) {
      this.contractAllInfo.recipientInfoList.splice(index, 1)
      this.$store.commit('deleteRecipien', index)
    },
    // 参数检查
    async checkParams() {
      if (
        this.contractAllInfo.contractBaseInfo.title.replace(/\s+/g, '') === ''
      ) {
        return this.$toast('请输入合同主题')
      }
      if (this.businessType.length === 0) {
        return this.$toast('请选择合同分类')
      } else {
        this.contractAllInfo.contractBaseInfo.businessType = this.businessType.businessType
      }
      if (this.contractAllInfo.contractBaseInfo.signingEndTime === '内容') {
        return this.$toast('签署截止日期不能为空')
      }
      if (this.contractAllInfo.contractBaseInfo.terminatedTime === '内容') {
        return this.$toast('文件到期日不能为空')
      }

      // 参与人检查
      if (this.contractAllInfo.signatoryInfoList.length === 0) {
        return this.$toast('请至少添加一个参与人')
      }
      if (this.contractAllInfo.signingFileInfoList.length <= 0) {
        return this.$toast('请上传待签章文件')
      }
      if (this.OrderSetdialogVisible) {
        this.contractAllInfo.contractBaseInfo.sortFlag = '1'
      } else {
        this.contractAllInfo.contractBaseInfo.sortFlag = '2'
      }
      this.$toast.loading({
        message: '提交中...',
        forbidClick: true, // 禁用背景点击
        duration: 0 // 持续时间，默认 2000，0 表示持续展示不关闭
      })
      const { data: res } = await addDraft(this.contractAllInfo)
      if (res.code !== '0') {
        return this.$toast.fail(res.msg)
      }
      this.$toast.success(res.msg)
      this.$router.push({
        name: 'sign-location',
        params: res.data
      })
    },
    backDelete() {
      this.$store.commit('deleteAll')
      this.$router.push('/contract')
    }
  },
  watch: {
    user: {
      handler: function(val) {
        this.$store.commit('setControlName', val.name)
        this.contractAllInfo.contractBaseInfo.title = this.controlName
      },
      deep: true
    }
  },
  computed: {
    ...mapState([
      'fileList',
      'recipien',
      'controlName',
      'businessType',
      'signDate',
      'expireDate',
      'addresser',
      'affiliate'
    ])
  }
}
</script>

<style scoped lang="less">
.ContractInformation {
  background-color: #f8f8f8;
  padding-top: 88px;
  .title-bar {
    height: 88px;
    width: 100%;
    position: fixed;
    top: 0;
    left: 0;
    box-sizing: border-box;
    /deep/.van-nav-bar__title {
      font-size: 34px;
      font-weight: bold;
    }
    /deep/.van-icon {
      font-size: 48px;
      color: #000;
    }
  }
  .field-name {
    height: 108px;
    margin-top: 20px;
    padding: 0 41px;
    font-size: 30px;
    /deep/.van-field__control {
      text-align: right;
    }
    /deep/.van-field__label {
      color: #000;
    }
  }
  .appearance {
    height: 108px;
    font-size: 30px;
    padding: 0 41px;
    .van-cell__value {
      color: #000;
    }
  }
  .on-off {
    margin-top: 20px;
  }
  // 参与方
  .participant {
    padding: 20px 41px;
    font-size: 26px;
    color: #9f9f9f;
  }
  .enterprise {
    .enterprise-one {
      height: 98px;
      width: 100%;
      display: flex;
      align-items: center;
      background-color: #fff;
      .van-button {
        height: 100%;
        border-width: 0;
        color: #2489f2;
        font-size: 30px;
      }
      .low-i {
        width: 1px;
        height: 42px;
        border-left: 1px solid #f2f2f2;
      }
    }
    .box {
      // 企业盒子
      .box-company {
        position: relative;
        width: 670px;
        height: 148px;
        margin: 28px 40px;
        padding: 0 36px;
        box-sizing: border-box;
        border: 1px solid #e4e4e4;
        border-radius: 10px;
        .box-company-title {
          margin-top: 30px;
          font-size: 30px;
        }
        .box-company-content {
          font-size: 26px;
          color: #666666;
          margin-right: 10px;
        }
        .box-company-num {
          font-size: 26px;
          color: #666666;
        }
        .van-icon {
          position: absolute;
          top: 20px;
          right: 20px;
          color: #b0b0b0;
          font-size: 30px;
        }
      }
      // 个人盒子
      .box-personage {
        position: relative;
        width: 670px;
        height: 100px;
        margin: 28px 40px;
        padding: 0 36px;
        line-height: 100px;
        box-sizing: border-box;
        border: 1px solid #e4e4e4;
        border-radius: 10px;
        .box-company-title {
          font-size: 30px;
          span {
            font-size: 26px;
            color: #666666;
            margin-left: 10px;
          }
        }
        .van-icon {
          position: absolute;
          top: 20px;
          right: 20px;
          color: #b0b0b0;
          font-size: 30px;
        }
      }
    }
  }
  // 合同文件
  .file {
    width: 100%;
    box-sizing: border-box;
    padding: 28px 40px 0;
    display: flex;
    flex-wrap: wrap;
    background-color: #fff;
    .van-icon {
      width: 120px;
      height: 120px;
      font-size: 60px;
      text-align: center;
      line-height: 120px;
      margin: 0 28px 28px 0;
      background-color: #f2f2f2;
      color: #b3b3b3;
      border-radius: 5px;
    }
    .iconfont {
      width: 120px;
      height: 120px;
      font-size: 60px;
      text-align: center;
      line-height: 120px;
      margin: 0 28px 28px 0;
      background-color: #f2f2f2;
      border-radius: 5px;
    }
    .text-img {
      display: flex;
      width: 148px;
      flex-direction: column;
      margin-bottom: 28px;
      .text-box {
        height: 120px;
        width: 120px;
        text-align: center;
        padding-top: 20px;
        background-color: #fff;
        box-sizing: border-box;
        border: 1px solid #e4e4e4;
        img {
          height: 80px;
          width: 70px;
        }
      }
      .text-span {
        color: #101010;
        margin-top: 10px;
        font-size: 24px;
      }
    }
  }
  // 提交
  .add-text-end {
    height: 136px;
    width: 100%;
    margin-top: 32px;
    padding: 20px 40px;
    box-sizing: border-box;
    background-color: #fff;
  }
  // 弹出层
  .van-popup {
    padding-bottom: 130px;
    box-sizing: border-box;
    background-color: #f8f8f8;
    .below-show-name {
      height: 110px;
      font-size: 30px;
      text-align: center;
      line-height: 110px;
      border-top: 1px solid #e4e4e4;
      background-color: #fff;
    }
    .btn-fixed {
      height: 110px;
      position: fixed;
      bottom: 0;
      left: 0;
      border-width: 0;
    }
  }
}
</style>
